<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="tag" v-if="detail.select">
				<uni-tag text="置顶" type="error" inverted size="mini"></uni-tag>
			</view>
			<view class="font">
                {{  detail.title }}				
			</view>
		</view>
		<view class="info">
			<view class="item">
				{{ detail.author }}
			</view>
			<view class="item">
				<uni-dateformat :date="detail.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<view class="content">
			<!-- 专门渲染富文本 uniapp->组件->基础内容 rich-text -->
			<!-- <rich-text :nodes="detail.content"></rich-text> -->
			<!-- 我们可以选择直接下载插件，功能更全，直接去uni 插件市场下载 mp-html 插件 -->
			<mp-html :content="detail.content"></mp-html>
		</view>
		<view class="count">
			阅读 {{ detail.view_count }}
		</view>
	</view>
</template>

<script setup>
	import { apiGetNoticeDetail } from "@/api/apis.js"
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from "vue"
	
	const detail = ref({})
	
	onLoad((e)=>{
		let { id } = e
		getNoticeDetail({id})
	})
	const getNoticeDetail = async (id) => {
		const res = await apiGetNoticeDetail(id)
		detail.value = res.data
	}
	
</script>

<style lang="scss" scoped>
	   .noticeLayout{
		   padding: 0 30rpx;
		   .title {
			   display: flex;
			   .tag {
				   flex-shrink: 0;
				   margin-right: 16rpx;
			   }
			   .font {
				   font-size: 38rpx;
				   font-weight: 500;
				   color: $text-font-color-1;
			   }
		   }
		   .info {
			   display: flex;
			   margin: 32rpx 0;
			   font-size: 28rpx;
			   color: $text-font-color-2;
		   }
		   .content {
			   padding: 30rpx 20rpx;
		   }
		   .text {
			   margin: 16rpx 0 22rpx;
			   font-size: 30rpx;
		   }
		   .count {
			   font-size: 26rpx;
			   color: $text-font-color-2;
		   }
	   }    
</style>
